<template>

  <el-breadcrumb :separator-icon="ArrowRight">
    <!-- <el-breadcrumb-item :to="{ path: '/homeScreen' }">homepage</el-breadcrumb-item> -->
    <el-breadcrumb-item v-for="v in lists.data" :key="v.path"><a :href="v.path">{{ v.meta.title
        }}</a></el-breadcrumb-item>

  </el-breadcrumb>

</template>


<script setup>
import { useRoute } from 'vue-router';
import { onMounted, reactive, watchEffect } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'


const route = useRoute()

const lists = reactive({
  data: []
})

watchEffect(() => {
  // console.log(route.matched);
  // console.log(route.matched[0].path);
  lists.data = route.matched
})




</script>

<style lang="less" scoped></style>